import React, { useState, useEffect, useCallback } from 'react';
import { Modal, Button, Select } from 'antd';

import {
  EditAddModalProps,
  selectLV,
} from '@/pages/features/userPermission/user/add/types/interface';

import { filterAssignArr } from '@/utils/tools';

import styles from './index.less';

const EditAddModal: React.FC<EditAddModalProps> = (props) => {
  const {
    visible,
    title,
    type = 'add',
    dataSource,
    selectedIds = [],
    handleOkCallback,
    handleCancelCallback,
  } = props;
  console.log(dataSource, props);
  const [_dataSource, _setdataSource] = useState([]);
  const [selectValue, setselectValue] = useState({
    selectVal1: '',
    selectVal2: [],
    selectedData1: {},
    selectedData2: [],
  });
  const [parentSelectData, setParentSelectData] = useState([]);
  const [sonSelectData, setsonSelectData] = useState([]);
  useEffect(() => {
    initSelectData();
  }, []);
  const initSelectData = () => {
    let copy = JSON.parse(JSON.stringify(dataSource));
    let data = type === 'edit' ? [copy] : copy;
    _setdataSource(data);
    console.log(data[0]);
    if (type === 'edit') {
      setsonSelectData(data[0].labelValues);
      setselectValue({
        selectVal1: data[0].selected ? data[0].id : '',
        selectVal2: data[0].labelValues
          .filter((item) => item.selected)
          .map((item) => item.id),
        selectedData1: {},
        selectedData2: [],
      });
    } else {
    }
  };


  const handleChange1 = (val) => {
    let data = _dataSource.filter((item) => item.id === val)[0];
    setselectValue({
      selectVal1: val,
      selectVal2: [],
      selectedData1: data,
      selectedData2: [],
    });
    console.log(val, data);
    setsonSelectData(data.labelValues);
  };
  const handleChange2 = (vals) => {
    let filterData = filterAssignArr(vals, sonSelectData, 'id');
    console.log(vals, sonSelectData,filterData);
    
    setselectValue({
      ...selectValue,
      selectVal2: vals,
      selectedData2: filterData as any,
    });
  };
  return (
    <Modal
      title={title}
      visible={visible}
      onOk={() => {
        handleOkCallback(type, selectValue);
      }}
      onCancel={handleCancelCallback}
      width="60%"
    >
      <div className={styles.container}>
        <div>
          <Select
            style={{ width: '90%' }}
            value={selectValue.selectVal1}
            // defaultValue={type === 'edit' ? _dataSource[0].value : ''}
            placeholder="请选择"
            // disabled={type === 'edit'}
            onChange={handleChange1}
          >
            {_dataSource.map((item) => (
              <Select.Option
                disabled={selectedIds.includes(item.id)}
                key={item.id}
                value={item.id}
              >
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </div>
        <div>
          <Select
            style={{ width: '100%' }}
            mode="multiple"
            allowClear
            placeholder="请选择"
            value={selectValue.selectVal2}
            onChange={handleChange2}
          >
            {sonSelectData.map((item) => (
              <Select.Option key={item.id} value={item.id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </div>
      </div>
    </Modal>
  );
};

export default EditAddModal;
